<script setup lang="ts">
    import { onMounted } from "vue" //导入vue函数
    import * as echarts from "echarts" //导入echarts

    //组件加载完成
    onMounted(()=>{
        //初始化图表
        initCharts()
    })

    //初始化图表
    function initCharts(){
        //创建图表
        const myChart = echarts.init(document.getElementById("main_order"))
        //设置图表参数
        myChart.setOption({
            title: { text: '2022年订单数量' },
            color: ['#1493fa'],
            grid: {
                left: '3%',
                right: '8%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                name: '月份',
                // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
                axisTick: {
                    alignWithLabel: true,
                },
                axisLabel: {
                    interval: 0,rotate: 45 // 设置刻度标签旋转角度为45度
                },
            },
            legend: {},
                yAxis: {
                name: '单位（个）',
            },
            series: [{
                data: [400, 450, 300, 230, 250, 300, 400, 350, 160, 350, 380, 400],
                type: 'bar',
                barWidth: '60%',
                name: '订单总数',
                label: {
                    show: true,
                    position: 'top',
                }
            }]
        })
        // 图表自适应大小
        window.addEventListener("resize", ()=>{
            myChart.resize()
        })
    }
</script>

<template>
    <section class="order">
        <!--显示图表的容器-->
        <div id="main_order"></div>
    </section>
</template>

<style scoped>
    .order{
        border:1px solid #E4E7ED;
        border-radius: 5px;
        width:50%;
        box-shadow: 0px 0px 5px 5px #E4E7ED;
        margin:20px 20px 20px 0px;
        display:flex;
    }
    .order #main_order{
        width:100%;
        height:300px;
        margin:10px;
    }
</style>
